<template>
    <div>
        <sear></sear>
        <div class="left bg">
            <div class="choiceness bg">
                <van-sidebar v-model="activeKey" class="bg">
                    <van-sidebar-item class="bg" :title="item.name" v-for="(item, index) in categoryList[0]" :key="index"
                        :id="item.id" @click="tiao(item.id)" />
                </van-sidebar>
            </div>
        </div>
        <div class="right bg">
            <right :message="num"></right>
        </div>
    </div>
</template>
<script>
import sear from "../../components/search.vue"
import { Search } from "../../api/index"
import right from "../../components/right.vue"
export default {
    name: "classify",
    data() {
        return {
            activeKey: 0,
            categoryList: [],
            num: ""
        }
    },
    methods: {
        tiao(index) {
            // console.log(index)
            this.num = index
            // console.log(this.num)
        }

    },
    mounted() {
        this.num = 1005000
        Search().then(res => {
            console.log(res.data.data)
            this.categoryList.push(res.data.data.categoryList)
        })
        console.log(this.categoryList)
    },
    components: {
        sear,
        right
    }
}
</script>
<style lang="scss">
.left {
    height: calc(100vh - 100px);
    float: left;
    width: 20%;
}

.right {
    float: left;
    height: calc(100vh - 100px);
    width: 80%;
}

.box {
    background-color: white !important;
}

.choiceness {
    height: 80vh;
    // background-color: graty !important;
}
</style>
